<template>
	<view class="resultPageWrap">
		<cus-nav title="比赛记录"></cus-nav>
		<view class="myResult starDec">
			<view class="">
				<view class="photo halo">
					<image :src="myPhoto" mode="aspectFit"></image>
				</view>
				<view class="userNameWrap halo">
					<view class="userName" style="word-break: break-all;">{{userName}}</view>
				</view>
			</view>
			<view class="resColumn">
				<view style="padding-bottom: 15rpx;font-weight: bold;">{{myinfo.wincount||0}}次</view>
				<view class="txt">累计获胜</view>
				<image class="img1" src="../static/img/wincount.png"></image>
			</view>
			<view class="resColumn">
				<view style="padding-bottom: 15rpx;font-weight: bold;">{{myTotal}}次</view>
				<view class="txt">累计参战</view>
				<image class="img2" src="../static/img/pkcount.png"></image>
			</view>
			<view class="resColumn">
				<view style="padding-bottom: 15rpx;font-weight: bold;">{{myPercent}}</view>
				<view class="txt">胜率</view>
				<image class="img3" src="../static/img/winrate.png"></image>
			</view>
		</view>
		<view class="tabs clear">
			<view class="left tab" :class="{actTab: curTabIndex === 0}" @click="changeTab(0)"><text>全国</text></view>
			<view class="left tab" :class="{actTab: curTabIndex === 1}" @click="changeTab(1)"><text>年级</text></view>
			<view class="left tab" :class="{actTab: curTabIndex === 2}" @click="changeTab(2)"><text>学校</text></view>
			<view class="left tab" :class="{actTab: curTabIndex === 3}" @click="changeTab(3)"><text>班级</text></view>
			<view class="left tab" :class="{actTab: curTabIndex === 4}" @click="changeTab(4)"><text>好友</text></view>
			<!-- <view class="decorate" :style="'left:' + (curTabIndex * 136 + 45) + 'rpx'"/> -->
			<view class="decorate" :class="{leftTopRad: curTabIndex === 0, rightTopRad: curTabIndex === 4}"/>
		</view>
		<view class="table">
			<view class="myRank starDec">
				<view class="left rank">{{myinfo.rownum || '无'}}</view>
				<view class="left photo halo" style="line-height: 60px;">
					<image :src="myPhoto" mode="aspectFit"></image>
				</view>
				<view class="studentNameWrap left halo">
					<view class="studentName">{{myinfo.name || ''}}</view>
				</view>
				<view class="right" style="margin-right: 40rpx; color: #2ca1ff;">当前排名</view>
			</view>
			<view class="rankList">
				<view class="rankItem clear" v-for="(item, index) in list" :key="index" @click="showModal(index)">
					<view class="left rank">{{index + 1}}</view>
					<view class="left photo halo" style="line-height: 120rpx;">
						<image :src="item.userimg|photoFilter" mode="aspectFit"></image>
					</view>
					<view class="studentNameWrap halo left">
						<view class="studentName">{{item.name}}</view>
					</view>
					<view class="right">
						<image class="arrow" src="../static/img/arrow.png"></image>
					</view>
				</view>
				<view v-if="list.length === 0" style="text-align: center; line-height: 60rpx;">暂无数据</view>
				<view v-if="more && list.length >6 " style="text-align: center; line-height: 60rpx;color: #2ca1ff;" @click="getNationList">查看更多</view>
			</view>
		</view>
		<e-modal :visible.sync="visible" width="90%">
			<view class="myResult myResult2">
				<view class="">
					<view class="photo">
						<image :src="curItem.userimg|photoFilter"></image>
					</view>
					<view class="userNameWrap">
						<view class="userName" style="word-break: break-all;">{{curItem.name}}</view>
					</view>
				</view>
				<view class="resColumn">
					<view>{{curItem.wincount||0}}次</view>
					<view class="txt">累计获胜</view>
					<image class="img1" src="../static/img/wincount.png"></image>
				</view>
				<view class="resColumn">
					<view>{{curItem|totalCount}}次</view>
					<view class="txt">累计参战</view>
					<image class="img2" src="../static/img/pkcount.png"></image>
				</view>
				<view class="resColumn">
					<view>{{curItem|winrate}}</view>
					<view class="txt">胜率</view>
					<image class="img3" src="../static/img/winrate.png"></image>
				</view>
			</view>
		</e-modal>
	</view>
</template>

<script>
	import {pkResult, pkResultList} from '../common/api.js'
	import eModal from '../components/e-modal.vue'
	export default{
		components:{
			eModal
		},
		data(){
			return{
				myinfo: {},
				curTabIndex: 0,
				myWin: 0,
				myTotal: 0,
				myPercent: '0%',
				photo: '',
				list: [],
				pageindex: 1,
				pageSize: 10,
				more: true,
				visible: false,
				curItem: {
					losecount: 0,
					wincount: 0,
					drawcount: 0
				}
			}
		},
		
		computed:{
			myPhoto(){
				let img = this.$store.state.user.userimg || '../../static/img/login/logo.png'
				return img
			},
			userName(){
				let nickName = this.$store.state.user.nickname || ''
				return nickName
			},
			type(){
				return this.curTabIndex + 1
			}
		},
		watch:{
			curTabIndex(val){
				this.refreshList()
			}
		},
		filters:{
			resultFilter(result){
				if(result===0){
					return '平局'
				}else if(result === 2){
					return '败北'
				}else{
					return '胜利'
				}
			},
			totalCount(item){
				return item.wincount + item.drawcount + item.losecount
			},
			winrate(item){
				if(!item){
					return '0%'
				}
				var total = item.wincount + item.drawcount + item.losecount
				var percent = Math.floor(item.wincount / total * 100)
				if(isNaN(percent)){
					return '0%'
				}else{
					return percent + '%'
				}
			},
			photoFilter(photo){
				if(!photo){
					return '../../static/img/mineIcon/xiangpian.png'
				}
				return photo
			}
		},
		onLoad(){
			// this.getMyResult()
			// this.getListData()
			this.getNationList()
		},
		methods:{
			refreshList(){
				this.pageindex = 1
				this.list = []
				this.more = true
				this.getNationList()
			},
			async getNationList(){
				if(!this.more){
					return
				}
				var params = {
					type: this.type,
					pageSize: this.pageSize,
					pageIndex: this.pageindex
				}
				const res = await pkResultList(params)
				if(res.myinfo){
					this.myinfo = res.myinfo
					this.myTotal = res.myinfo.drawcount + res.myinfo.wincount + res.myinfo.losecount
					this.myPercent = Math.floor(this.myinfo.wincount / this.myTotal * 100) + '%'
				}
				if(res.data){
					this.list = this.list.concat(res.data)
					if(res.data.length === this.pageSize){
						this.pageindex++
					}else{
						this.more = false
					}
				}
				
			},
			changeTab(index){
				this.curTabIndex = index
			},
			showModal(index){
				this.curItem = this.list[index]
				this.visible = true
			},
			async getMyResult(){
				const res = await pkResult()
				try{
					this.myWin = res.wincount
					this.myTotal = res.drawcount + res.losecount + res.wincount
					this.myPercent = Math.floor(this.myWin / this.myTotal * 100) + '%'
				}catch(err){
					console.log(err)
					this.$toast(err.message)
				}
			},
			async getListData(){
				if(!this.more){
					return
				}
				const params = {
					qUserId: this.$store.state.user.keyid,
					index: this.pageindex,
					pageSize: this.pageSize,
				}
				const res = await pkResult(params)
				console.log(res.data)
				if(res.data instanceof Array){
					this.list = this.list.concat(res.data)
				}
				if(res.data && res.data.length === this.pageSize){
					this.pageindex++
				}else{
					this.more = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../common/style/public.css';
	.resultPageWrap{
		padding-top: 15px;
		width: 750rpx;
		color: #2ca1ff;
	}
	.starDec{
		background-image: url('../static/img/stars.png');
		background-position: 538rpx 5rpx;
		background-size: 106rpx 93rpx;
		background-repeat: no-repeat;
	}
	.tabs{
		margin: 30rpx 50rpx 40rpx;
		position: relative;
		font-weight: bold;
		font-size: 35rpx;;
		// padding-bottom: 20px;
		.tab{
			color: #2ca1ff;
			width: 20%;
			position: relative;
			z-index: 2;
			text-align: center;
		}
		.actTab{
			border-top-left-radius: 11rpx;
			border-top-right-radius: 11rpx;
			background-color: #2ca1ff;
			color: #ffffff;
			text{
				display: block;
				font-size: 40rpx;
				transform: translateY(10rpx);
			}
		}
		.decorate{
			height: 22rpx;
			border-radius: 11rpx;
			position: absolute;
			// top: 22px;
			bottom: -22rpx;
			left: 0;
			right: 0;
			// left: 0;
			// transition: left 0.4s;
			background: #2ca1ff;
		}
		.leftTopRad{
			border-top-left-radius: 0;
		}
		.rightTopRad{
			border-top-right-radius: 0;
		}
	}
	.myResult{
		font-size: 24rpx;
		color: #000000;
		background-color: rgba(178,234,249,0.46);
		width: 650rpx;
		// width: 656rpx;
		// height: 242rpx;
		margin: 0 auto;
		border-radius: 15rpx;
		box-shadow: 4rpx 4rpx 4rpx rgba(55, 189, 211, 0.25);
		text-align: center;
		display: flex;
		// align-items: center;
		padding: 25rpx 0;
		&>view{
			width: 25%;
		}
		.photo{
			box-shadow: 0 0 0 14rpx rgba(255,255,255,0.4);
			border-radius: 50%;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				overflow: hidden;
				background: #ffffff;
				// background: #000000;
				// box-shadow: 5rpx 2rpx 5rpx #ffffff;
				box-shadow: 0 0 0 5rpx #ffffff;
				margin-bottom: 10rpx;
			}
		}
		.userNameWrap{
			width: 147rpx;
			margin-left: 18rpx;
			margin-top: 30rpx;
			padding: 5rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0 0 0 7rpx rgba(255,255,255,0.4);
			.userName{
				// margin-left: 18rpx;
				width: 145rpx;
				height: 38rpx;
				line-height: 38rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				border-radius: 9rpx;
				// border: 5rpx solid #ffffff;
				color: #ffffff;
				font-size: 26rpx;
				background-color: #ffc81a;
			}
		}
		
		.resColumn{
			height: 90px;
			font-size: 42rpx;
			color: #5bbbfc;
			// display: flex;
			// flex-direction: column;
			// justify-content: space-around;
			// align-items: center;
		}
		.txt{
			margin-top: 30rpx;
			width: 113rpx;
			margin: 0 auto;
			height: 31rpx;
			line-height: 31rpx;
			font-size: 20rpx;
			color: #ffffff;
			background-color: #2ca1ff;
			border-radius: 10rpx;
		}
		.img1{
			width: 30rpx;
			height: 38rpx;
			margin-top: 7rpx;
		}
		.img2{
			width: 71rpx;
			height:31rpx;
			margin-top: 14rpx;
		}
		.img3{
			width:31rpx;
			height: 31rpx;
			margin-top: 9rpx;
		}
	}
	.myResult2{
		width: 100%;
	}
	.table{
		font-size: 24rpx;
		color: #000000;
		width: 650rpx;
		margin: 0 auto;
		// height: 880px;
		border-radius: 15rpx;
		background-color: rgba(178,234,249,0.46);
		// box-shadow: 0 0 7rpx rgba(162,163,162,1);
		box-shadow: 4rpx 4rpx 4rpx rgba(55, 189, 211, 0.25);
		.rankList{
			height: 820px;
			overflow-y: scroll;
			// border-top: 1px solid rgba(162,163,162,0.6);
		}
		.myRank, .rankItem{
			height: 120rpx;
			line-height: 120rpx;
		}
		.myRank{
			position: relative;
			&::after{
				position: absolute;
				content: '';
				bottom: 0;
				left: 17rpx;
				right: 17rpx;
				border-radius: 1px;
				height: 1px;
				background-color: #2ca1ff;
			}
		}
		.photo{
			width: 80rpx;
			height: 80rpx;
			// border-radius: 50%;
			// overflow: hidden;
			vertical-align: middle;
			// background-color: #ffffff;
			border-radius: 50%;
			box-shadow: 0 0 0 14rpx rgba(255,255,255,0.4);
		}
		.rank{
			font-size: 28rpx;
			color: #5bbbfc;
			width: 120rpx;
			height: 120rpx;
			text-align: center;
		}
		.studentNameWrap{
			margin: 40rpx 0 0 30rpx;
			padding: 5rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0 0 0 7rpx rgba(255,255,255,0.4);
			.studentName{
				// width: 260rpx;
				// overflow: hidden;
				// margin-left: 10px;
				// margin: 40rpx 0 0 30rpx;
				width: 147rpx;
				height: 38rpx;
				line-height: 38rpx;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				border-radius: 9rpx;
				// border: 5rpx solid #ffffff;
				color: #ffffff;
				font-size: 28rpx;
				background-color: #ffc81a;
			}
		}
		
		.arrow{
			width: 20rpx;
			height: 40rpx;
			margin-right: 40rpx;
			vertical-align: middle;
		}
	}
	
	
	
	
	.table{
		.photo{
			margin-top: 20rpx;
		}
	}
	.myResult{
		.photo{
			width: 80rpx;
			height: 80rpx;
			left: calc((162rpx - 60rpx)/2);
		}
	}
	.photo{
		position: relative;
		overflow: visible;
		image{
			width: 80rpx;
			height: 80rpx;
			position: relative;
			z-index: 2;
			border-radius: 50%;
			overflow: hidden;
		}
		&:before{
			content: '';
			position: absolute;
			background-color: #ffffff;
			top:-8rpx;
			left: -8rpx;
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			z-index: 1;
		}
		&:after{
			contetn: '';
			position: absolute;
			left: -16rpx;
			top: -16rpx;
			background: rgba(255,255,255,0.6);
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
			z-index: 1;
		}
	}
</style>
